<template>
  <div class="lineAContainer" :style="getParm()">
    <div class="lineALeft"></div>
    <div class="lineACenter">{{ props.title }}</div>
    <div class="lineARight"></div>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";

const props = defineProps({
  title: {
    type: String,
    required: false,
    default: i18nt.value.constantsOne.SuperM.enSubTitle,
  },
  color: {
    type: String,
    required: false,
    default: "#a3a3a3",
  },
  fontSize: {
    type: String,
    required: false,
    default: "19px",
  },
});

const getParm = () => {
  return `--main-color: ${props.color}; --main-font-size: ${props.fontSize};`;
};
</script>

<style scoped lang="scss">
.lineAContainer {
  @include relative_hw(26px, 100%);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .lineALeft,
  .lineARight {
    @include relative_hw(1px, 540px);
    background: var(--main-color);
  }
  .lineACenter {
    @include rel_cen_hw(auto, auto);
    color: var(--main-color);
    font-size: var(--main-font-size);
    font-family: "PingFang SC", "PingFang SC";
  }
}
</style>
